<template>
  <el-table :data="tableData" style="width: 100%; margin: 20px 0 0" border>
    <el-table-column label="商品信息" min-width="320">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <PipeImage :url="scope.row.cover" />
          <div style="flex: 1; padding-left: 8px">
            <div style="line-height: normal; margin-bottom: 8px">
              {{ scope.row.title }}
            </div>
            <el-tag type="info" effect="plain" v-if="scope.row.isRef">
              {{ scope.row.category?.title }}
            </el-tag>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="商品类型" min-width="80">
      <template #default="scope">
        <PipeTags type="goods-type" :state="scope.row.type" />
      </template>
    </el-table-column>
    <el-table-column
      prop="goodsSpecs"
      label="商品规格"
      min-width="120"
    ></el-table-column>
    <el-table-column
      prop="count"
      label="购买数量"
      min-width="80"
    ></el-table-column>
    <el-table-column label="商品单价" min-width="80">
      <template #default="scope">
        <PipeMoney :type="scope.row.type" :money="scope.row.price" />
      </template>
    </el-table-column>
    <el-table-column label="价格小计" min-width="80">
      <template #default="scope">
        <PipeMoney :type="scope.row.type" :money="scope.row.priceTotal" />
      </template>
    </el-table-column>
  </el-table>
  <div class="aside-summary">
    合计：<PipeMoney :type="props.detailData?.type" :money="priceSummary" />
  </div>
</template>

<script setup lang="ts">
import { PropType, computed } from 'vue';
import { calcAdd } from '@/utils/util';

// props
const props = defineProps({
  detailData: {
    type: Object as PropType<API.order.EntitySchema>,
    default: () => ({})
  }
});

const tableData = computed(() => props.detailData?.goods ?? []);

const priceSummary = computed(() =>
  tableData.value.reduce(
    (count, current) => +calcAdd(count, current.priceTotal),
    0
  )
);
</script>

<style lang="scss" scoped>
.aside-summary {
  font-size: 12px;
  padding: 16px;
  text-align: right;
  border: 1px solid #ebeef5;
  border-top: none;
  zoom: 1.1;
}
</style>
